<template>
 <!-- style="width: 1400px;" -->
    <div class="uploads_class">
        <a-row>
            <div class="" style="margin-top: 5px;"></div>
            <!--  -->
            <a-tabs v-model="activeKey" default-active-key="1"  @change="tabs_change">
                <a-tab-pane key="1" tab="我的网盘" force-render>
                    <myfiles ref="myfiles"></myfiles>
                </a-tab-pane>
                <a-tab-pane key="2" tab="传输列表" force-render>
                    <uploading ref="uploading"></uploading>
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的共享">
                   <myshare ref="myshare"></myshare>
                </a-tab-pane>
                <a-tab-pane key="4" tab="共享资源">
                    <allshare ref="allshare"></allshare>
                </a-tab-pane>
                <!-- <a-tab-pane key="5" tab="我的设置">
                    Content of Tab Pane 4
                </a-tab-pane> -->
            </a-tabs>
        </a-row>
    </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
    export default {
        data() {
            return {
                activeKey:"1"
            }
        },
        beforeUnmount() {
            this.$mitt.off('tab_change_21');
        },
        mounted() {
            this.$mitt.on("tab_change_21",()=>{
                this.activeKey="2"
            })
        },


        
        components: {
            uploading: defineAsyncComponent(() => import("./uploading.vue")),
            myfiles: defineAsyncComponent(() => import("./myfiles.vue")),
            myshare: defineAsyncComponent(() => import("./myshare.vue")),
            allshare: defineAsyncComponent(() => import("./allshare.vue")),


        },
        methods:{
            tabs_change(activeKey){
                if(activeKey==1){
                    this.$mitt.emit("tab_change_1",1)
                }
                else if(activeKey==2){
                    this.$mitt.emit("tab_change_2",2)
                }
                else if(activeKey==3){
                    this.$mitt.emit("tab_change_3",3)
                }
                else if(activeKey==4){
                    this.$mitt.emit("tab_change_4",4)
                }
            }
                
        }
  }
</script>
<style >
.ant-separator-root:hover {
  color: #40a9ff;
  cursor: pointer;
}
.border_none{
    border-style: none !important;
}
.dashed_none:hover{
    border-style: solid !important;
}
.ant-divider-horizontal {
    margin: 5px 0;
}
.file_p_style {
    margin-top: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
</style>